<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button id="button">Magic Button</button>
</body>
<script>
  let button = document.getElementById('button')
  button.addEventListener('click', () => {
    for (let i = 0; i < 50; i++) {
      let spark = document.createElement('i')
      spark.classList.add('spark')

      const randomX = (Math.random() - 0.5) * window.innerWidth + 'px'
      const randomY = (Math.random() - 0.5) * window.innerHeight + 'px'

      spark.style.setProperty('--x', randomX)
      spark.style.setProperty('--y', randomY)

      const randomSize = Math.random() * 8 + 2

      spark.style.width = randomSize + 'px'
      spark.style.height = randomSize + 'px'

      const duration = Math.random() * 2 + 0.5
      spark.style.animation = `animate ${duration}s ease-out forwards`
      document.body.appendChild(spark)

      // setTimeout(() => {
      //   spark.remove()
      // }, 2000);
    }
  })
</script>

</html>